<template>
  <main>
    <header>
      <el-date-picker
        v-model="timeQuantum"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        @change="changeDate()"
      />
    </header>
    <div class="top item">
      <InfoItem :info="todyInfo" :max="max" />
    </div>
    <div class="content">
      <InfoItem
        class="item"
        v-for="item in infoContentList"
        :key="item.name + getRandomInt(0, 999)"
        :info="{ key: item.name, count: { count: item.info.count, max: item.info.max } }"
        :max="max"
      />
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import InfoItem from '@renderer/components/info/InfoItem.vue'
import { useCountStore, Count } from '@renderer/stores/countStore'
import dayjs from 'dayjs'

const countStore = useCountStore()
const todyInfo: { key: string; count: Count } = countStore.getTodayCountInfo()

const timeQuantum = ref<[Date, Date]>([
  // dayjs().startOf('week').subtract(-1, 'day').toDate(),
  dayjs().startOf('month').toDate(),
  new Date()
])

const infoContentList = ref<{ name: string; info: { count: number; max: number } }[]>([])
const max = ref<number>(todyInfo.count.max)
getInfo(timeQuantum.value[0], timeQuantum.value[1])

// 日期选择器改变时
function changeDate() {
  //console.log('changeDate', timeQuantum.value)
  getInfo(timeQuantum.value[0], timeQuantum.value[1])
}

// 获取信息
function getInfo(startDate: Date, endDate: Date) {
  // dayjs将Date类型转换成yyyyMMdd格式字符串
  window.api.getInfoListAsync(startDate, endDate, (infoList) => {
    const todayKey = dayjs().format('YYYY-MM-DD')
    // 剔除掉今天的信息
    infoList = infoList.filter((item) => item.name !== todayKey)
    for (const info of infoList) {
      if (info.info.max > max.value) {
        max.value = info.info.max
      }
    }
    infoContentList.value = infoList
  })
}

// 随机生成一个数字
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

</script>

<style lang="scss" scoped>
$border-color: #eaeaea;

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px;
    padding-left: 100px;
    padding-right: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid $border-color;
  }
  .item {
    width: 100%;
    height: 32px;
    border-bottom: 1px solid $border-color;
  }
  .top {
    border-bottom: 1px solid $border-color;
  }
  .content {
    width: 100%;
    height: 500px;
    overflow-y: overlay;
  }
}
</style>
